<template>
  <div class="container" style="width:98vw;height:98vh;background:#f4f6f8">
    <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark" style="text-align:left;height:50px;line-height:50px;margin-top:20px">
        讲师管理/讲师列表
</div></el-col>
    </el-row>
     <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark" style="height:50px;line-height:50px">
        <el-button  type="success"  @click="dialogFormVisible = true" style="float:right;margin-top:5px">添加讲师</el-button>
<el-dialog title="添加讲师" :visible.sync="dialogFormVisible" @click="cancel()">
  <el-form :model="form">
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off" placeholder="讲师名称" @blur="name_blur()"></el-input><span style="color:red" class="spa">{{form.name_span}}</span>
    </el-form-item>
    <el-form-item label="昵称" :label-width="formLabelWidth">
      <el-input v-model="form.nick" autocomplete="off" @blur="nick_blur()"></el-input><span style="color:red" class="spa">{{form.nick_span}}</span>
    </el-form-item>
    <el-form-item label="生日" :label-width="formLabelWidth">
       <div class="block">
        <el-date-picker
        v-model="form.birthdata"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd">
      </el-date-picker>
  </div>
      <!-- <el-input v-model="form.birthdata" autocomplete="off" type="date"></el-input> -->
    </el-form-item>



    <el-form-item label="手机号" :label-width="formLabelWidth">
      <el-input v-model="form.iphone" autocomplete="off" type="number" @blur="iphone_blur()"></el-input><span style="color:red" class="spa">{{form.iphone_span}}</span>
    </el-form-item>

    <el-form-item label="类型" :label-width="formLabelWidth">
      <el-select v-model="form.teachertype" placeholder="--选择--">
        <el-option label="讲师" value="讲师">讲师</el-option>
        <el-option label="老师" value="老师">老师</el-option>
      </el-select>
    </el-form-item>
    性别：  <el-radio v-model="form.sex" label="0">男</el-radio>
  <el-radio v-model="form.sex" label="1">女</el-radio>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false;cancel()">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = true;addfun()">确 定</el-button>
  </div>
</el-dialog>


</div></el-col>
    </el-row>
    
    <!-- 主要内容 -->
   <el-row>
    <el-col :span="24">
    <div class="grid-content bg-purple-dark" style="height:100vh;">
        <div style="text-align:left;">
              <el-input v-model="input_search"></el-input>
             <el-button type="success" @click="search()">搜索</el-button>
        </div>

<!-- 分页器 -->
  <!-- <el-pagination
  background
  layout="prev, pager, next"
  :total="total_num"
  @prev-click="yeshu"
  @next-click="yeshu"
  @current-change="yeshu"
  >
</el-pagination> -->

  <div class="block">
    <el-pagination
     background
      @size-change="handleSizeChange"
      @prev-click="yeshu"
      @next-click="yeshu"
      @current-change="yeshu"
      :current-page="currentPage1"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="page1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total_num"
      >
    </el-pagination>
  </div>



        <div>
              <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="编号"
      width="160">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="160">
    </el-table-column>
    <el-table-column
      prop="nick"
      label="昵称"
      width="160">
    </el-table-column>
     <el-table-column
      prop="birthdata"
      label="出生日期"
      width="160">
    </el-table-column>
     <el-table-column
      prop="sex"
      label="性别"
      width="160">
    </el-table-column>
     <el-table-column
      prop="iphone"
      label="手机号码"
      width="160">
    </el-table-column>
     <el-table-column

      label="操作" 
      #default="scope"
      >
      <el-button type="primary" size="mini" @click="dialogTableVisible = true;look(scope.$index, scope.row)">查看
</el-button>
<el-dialog title="讲师信息" :visible.sync="dialogTableVisible">
  <el-table :data="look_arr">
    <el-table-column property="name" label="姓名" width="150"></el-table-column>
    <el-table-column property="nick" label="昵称" width="200"></el-table-column>
    <el-table-column property="sex" label="性别"></el-table-column>
  </el-table>
</el-dialog>&emsp;


       <el-button type="primary" size="mini" @click="gai(scope.$index, scope.row)">编辑</el-button>
        <el-button type="warning" size="mini" @click="delfun(scope.$index, scope.row)">注销</el-button>
    </el-table-column>
  </el-table>
        </div>

    </div>

</el-col>
    </el-row>



  </div>
</template>

<script>
export default {
  data() {
    return {
        total_num:0,
        currentPage1:1, //页码数
        page1:10, //	每页显示个数选择器的选项设置
        look_arr:[],
        input_search: '',
        tableData: [],
        old_tableData: [],
        dialogFormVisible: false,
        dialogTableVisible: false,
        form: {
          name: '',
          name_span:'',
          nick:'',
          nick_span:'',
          birthdata:'',
          iphone:'',
          iphone_span:"",
          teachertype:"",
          sex:'0',
        },
        formLabelWidth: '120px',
       
    }
  },
  created(){
    this.showlist()
  },
  methods:{
      name_blur(){
         var ming =  /^[\u4e00-\u9fa5]{2,5}$/g
          if(this.form.name==''){
              this.form.name_span='*不能为空'
              return
          }else if(!ming.test(this.form.name)){
              this.form.name_span='只能是2~5位汉字'   
              return          
          }else{
              this.form.name_span='输入正确'
          }
      },
      nick_blur(){
          var nicheng = /^\w{6,20}$/img
          if(this.form.nick==''){
              this.form.nick_span='*不能为空'
              return
          }else if(!nicheng.test(this.form.nick)){
              this.form.nick_span='只能是6~20位数字，字母下划线'
              return             
          }else{
              this.form.nick_span='输入正确'
          }
      },
      iphone_blur(){
        // console.log(80000)
        var num = /^1[2-9]\d{9}$/g
          if(this.form.iphone==''){
              this.form.iphone_span='*不能为空'
              return
          }else if(!num.test(this.form.iphone)){
              this.form.iphone_span='仅限11位，第一个数字为1'
              return             
          }else{
              this.form.iphone_span='输入正确'
          }
      },
      addfun(){
          var spa = document.getElementsByClassName("spa");
          // console.log(spa.length) //3
        for (let k = 0; k < spa.length; k++) {
          if (spa[k].innerHTML == "输入正确") {
            var objstr = {
                  name: this.form.name,
                  nick:this.form.nick,
                  birthdata:this.form.birthdata,
                  iphone:this.form.iphone,
                  // teachertype: this.form.teachertype, //类型可以不传，传的话是传数字1，2
                  sex:this.form.sex,
              }  
          }else{
            alert('输错有误')
            return
          }
        }
       this.$apiPost('http://47.94.4.201/index.php/index/index/addteacher',objstr).then((res)=>{
            console.log(this.form.name,this.form.nick,this.form.birthdata,this.form.iphone, this.form.teachertype,this.form.sex,)
            console.log(res)
            if(res.code==0){
                alert('添加成功')
                this.tableData = []; //清空列表
                this.showlist()
            }else{
                // console.log(res)
                alert('添加列表失败')
            }
        })
        
      },
      // 不带括号的方法，本身自带传递的参数
      yeshu(row){
        console.log(row)
          this.$apiGet('http://47.94.4.201/index.php/index/teacher/teacherlist?page='+row).then((res)=>{
           this.tableData = res.data.data
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$apiGet('http://47.94.4.201/index.php/index/teacher/teacherlist?pagelimit='+val).then((res)=>{
           this.tableData = res.data.data
          })
      },
      showlist(){
        // ?后面传2参数，&符连接
        // http://47.94.4.201/index.php/index/teacher/teacherlist?page=1&pagelimit=10
         this.$apiGet('http://47.94.4.201/index.php/index/teacher/teacherlist?page='+this.currentPage1+'&pagelimit='+this.page1).then((res)=>{
          //  console.log(res.data.data)
            if(res.code==0){
                // 页面加载的时候显示有多少条数据
            this.total_num = res.data.pagecount
            res.data.data.forEach((item)=>{
              // console.log(item,i)  //item=>将每一行都循环出来了，i=>是索引
              if(item.sex==0){
                item.sex='男'
              }else if(item.sex==1){
                item.sex='女'
              }
              /* 类似于插槽，el-table，可以在上面绑定（:data="tableData"，tableData为数组）,每一列的prop会自动接收并遍历出来 */
              this.tableData = res.data.data;
              this.old_tableData = res.data.data;
              /* 若不是el-table，可用这个方法 */
                //   let obj = {
                //     id:item.id,
                //     name:item.name,
                //     nick:item.nick,
                //     birthdata:item.birthdata,
                //     iphone:item.iphone,
                //     sex:item.sex,
                // }
                // this.tableData.push(obj)
                // this.old_tableData.push(obj)
            })
            }else{
              alert('页面显示失败')
            }
    
          })
      },
      // 取消添加
      cancel(){
        console.log('你好')
      },
      search(){
        /* 搜索数据库 */
         let input_search =  this.input_search.trim() 
           this.$apiGet('http://47.94.4.201/index.php/index/teacher/getsearch?name='+input_search).then((res)=>{
             this.tableData = res.data.data
                 console.log(res)
            })
            /* 页面上的搜索，不是搜索数据库 */
            //  this.tableData=this.old_tableData.filter((item)=>{
            //     // console.log(item)
            //     // console.log(item.name.indexOf(this.input_search))
            //   let input_search =  this.input_search.trim() 
            //     if(item.name.indexOf(input_search)>-1){
            //         console.log(8888)
            //         return item
            //     }else{
            //       console.log(6866868)
            //     }
            // })
      },
      look(index,row){
      // console.log(row.id)
      let obj = {
        id:row.id
      }
      this.$apiGet('http://47.94.4.201/index.php/index/index/getteacherbyid',obj).then((res)=>{
        console.log(res)
        //清空数据，避免继续添加
        this.look_arr=[];  
        this.look_arr.push(row)
      })
      },
      gai(index,row){
        console.log(index,row)
        this.$apiPost('http://47.94.4.201/index.php/index/index/upteacher?id='+row.id+'&name='+row.name).then((res)=>{
          console.log(res)
        })
      },
      delfun(index,row){
        // console.log(index,row)
        let obj = {
          id: row.id
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$apiGet('http://47.94.4.201/index.php/index/teacher/delteacher',obj).then((res)=>{
            if(res.code==0){
                // 操作dom
              this.tableData.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '注销成功!'
                });
            }
            // console.log(res)
          })
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });          
        });
         
      },
    
  },
  components: {

  }
}
</script>

<style scoped >
/* 分页器背景颜色 */
::v-deep  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff;   
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #627cdb; 
    color: #fff;
}


.el-input{
    width:50%;
}
.el-form-item__content{
    margin-left:0px
}

 .el-row {
    margin-bottom: 20px;
  }
 .el-row:last-child {
    margin-bottom: 0;
 }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
